<template>
  <view class="weather-container">
    <button @click="getWeather" type="primary">获取天气预报</button>
    <view class="weather-info" v-if="weatherData">
      <view>城市：{{ weatherData.cityInfo.city }}</view>
      <view>更新时间：{{ weatherData.time }}</view>
      <view>今日天气：{{ weatherData.data.forecast[0].type }}</view>
      <view>今日温度：{{ weatherData.data.forecast[0].low }} ~ {{ weatherData.data.forecast[0].high }}</view>
      <view>明日天气：{{ weatherData.data.forecast[1].type }}</view>
      <view>明日温度：{{ weatherData.data.forecast[1].low }} ~ {{ weatherData.data.forecast[1].high }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      weatherData: null
    };
  },
  methods: {
    getWeather() {
      uni.request({
        url: 'http://t.weather.sojson.com/api/weather/city/101230501',
        success: (res) => {
          if (res.statusCode === 200 && res.data.status === 200) {
            this.weatherData = res.data;
            console.log('天气数据：', res.data);
          } else {
            uni.showToast({
              title: '获取天气失败',
              icon: 'none'
            });
            console.error('获取天气失败：', res.data.message);
          }
        },
        fail: (err) => {
          uni.showToast({
            title: '网络请求失败',
            icon: 'none'
          });
          console.error('网络请求失败：', err);
        }
      });
    }
  }
};
</script>

<style scoped>
.weather-container {
  padding: 20rpx;
}
.weather-info {
  margin-top: 20rpx;
  line-height: 40rpx;
  font-size: 28rpx;
}
</style>